<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const roles = ref([])
const keyword = ref('')
const loading = ref(false)

const fetchRoles = async () => {
  loading.value = true
  const qs = new URLSearchParams({ pageNo: '1', pageSize: '20', keyword: keyword.value })
  const res = await fetch(`/api/roles/search?${qs.toString()}`)
  const data = await res.json()
  roles.value = data.data?.records || []
  loading.value = false
}

const openChat = (role) => {
  // 先跳转到会话列表（按该角色筛选），用户可选择继续某个会话或新开
  router.push({ path: '/conversations', query: { roleId: role.id } })
}

onMounted(fetchRoles)
</script>

<template>
  <div class="page">
    <h2>角色列表</h2>
    <div class="toolbar">
      <input v-model="keyword" placeholder="搜索角色..." class="input" />
      <button @click="fetchRoles" :disabled="loading" class="btn">搜索</button>
    </div>
    <div v-if="loading" class="loading">加载中...</div>
    <ul class="list">
      <li v-for="r in roles" :key="r.id" class="item" @click="openChat(r)">
        <div class="title">{{ r.name }}</div>
        <div class="desc">{{ r.description }}</div>
      </li>
    </ul>
  </div>
  </template>

<style scoped>
.page { padding: 20px; width: 100%; color: #1f2937; height: 100%; overflow-y: auto; }
h2 { font-size: 22px; margin-bottom: 12px; color: #111827; }
.toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.input { padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; flex: 1; }
.btn { padding: 8px 14px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; }
.btn:disabled { background: #93c5fd; cursor: not-allowed; }
.loading { color: #6b7280; }
.list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.item { padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.04); cursor: pointer; }
.item:hover { border-color: #c7d2fe; box-shadow: 0 2px 6px rgba(37,99,235,0.15); }
.title { font-weight: 600; color: #111827; margin-bottom: 6px; }
.desc { font-size: 13px; color: #6b7280; min-height: 34px; }
</style>


